<template>
    <el-button type="primary" @click="drawer = true" :disabled="role == 1">
        添加管理员
    </el-button>
    <el-table :data="filterData" style="width: 100%">
        <el-table-column type="selection" width="55" />

        <el-table-column label="序号">
            <template #default="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>

        <el-table-column property="adminname" label="账户名">
            <template #default="scope">{{ scope.row.adminname }}</template>
        </el-table-column>

        <el-table-column property="role" label="权限">
            <template #default="scope">
                <el-tag type="success" v-if="scope.row.role == 1">管理员</el-tag>
                <el-tag type="danger" v-else-if="scope.row.role == 2">超级管理员</el-tag>
            </template>
        </el-table-column>

        <el-table-column label="操作">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                    Edit
                </el-button>
                <el-button size="small" v-if="role == 2" type="danger" @click="handleDelete(scope.$index, scope.row)">
                    Delete
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
        :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    <el-drawer v-model="drawer" title="添加管理员" :with-header="true">
        <el-form :model="ruleForm">
            <el-form-item label="管理员账号" prop="adminname">
                <el-input v-model="ruleForm.adminname" placeholder="输入管理员账户名" type="text" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="管理员密码" prop="password">
                <el-input v-model="ruleForm.password" placeholder="输入管理员密码" type="password"
                    autocomplete="'off"></el-input>
            </el-form-item>

            <el-form-item label="管理员权限" prop="role">
                <el-select v-model="ruleForm.role" placeholder="选择管理员类型">
                    <el-option label="管理员" value="1" />
                    <el-option label="超级管理员" value="2" />
                </el-select>
            </el-form-item>
        </el-form>

        <el-tree ref="treeRef" :data="data" show-checkbox node-key="path" :props="defaultProps" />
        <el-button type="primary" @click="
            addAdminHandler">确定</el-button>
    </el-drawer>

</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { getAdminList, AddAdmin } from '@/apis/myadmin'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/stores/useUser'
const useUser=useUserStore()
const{role}=storeToRefs(useUser)
// import { premission } from '@/utils/premission'
// premission()

//分页
const currentPage = ref(1)
const pageSize = ref(5)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
const filterData = computed(() => tableData.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value))

// 发请求获取管理员数据
interface IAdmin {
    adminname: string
    adminid: string
    password?: string
    role: number
    checkedKeys: string[]
}
const tableData = ref<IAdmin[]>([])
getAdminList().then(res => {
    // console.log(res);
    tableData.value = res.data.data
})
// 管理员的页面操作删除和编辑
const handleEdit = (index: number, row: IAdmin) => {
    console.log(index, row);
}
const handleDelete = (index: number, row: IAdmin) => {
    console.log(index, row);
}

// 抽屉形式进行管理员数据的添加
const drawer = ref(false)

interface IAdmin1 {
    adminname: string
    password: string
    role: string
    checkedKeys: string[]
}
const ruleForm = reactive<IAdmin1>({
    adminname: '',
    password: '',
    role: '',
    checkedKeys: []
})
console.log(ruleForm);

//树形控件
import type { TreeInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
const defaultProps = {
    children: 'children',
    label: 'label'
}
const treeRef = ref<TreeInstance>()

//把路由表导入过来
import { routes } from '@/router'
//过滤掉/login
const filterRoutes = routes.filter(item => item.path != '/login' && item.path != '/np')
//再把它映射成上面的data的树形结构
function MyRoutesToData(routes: any) {
    const resRoutes = routes.map((item: any) => {
        const res = {
            path: item.path,
            label: item.meta?.title || '',
            children: []
        }
        if (item.children && item.children.length > 0) {
            res.children = MyRoutesToData(item.children)
        }
        return res
    })
    return resRoutes
}
console.log("111111", MyRoutesToData(filterRoutes));
const data = MyRoutesToData(filterRoutes)

//添加管理员操作
const addAdminHandler = async () => {
    ruleForm.checkedKeys = treeRef.value!.getCheckedKeys(false) as string[];

    try {
        await AddAdmin(ruleForm);
        ElMessage.success("管理员添加成功")
        drawer.value = false  //关闭抽屉
        const { data: { data } } = await getAdminList();
        tableData.value = data
    } catch (error: any) {
        ElMessage.error(error.response?.data?.msg || '添加失败')
    }

}

</script>

<style></style>